.notification-settings-form__streams {
	display: flex;
}

.notification-settings-form-stream-selector {
	.form-select {
		width: 100%;
		margin: 0;
	}

	@include breakpoint( ">480px" ) {
		display: none;
	}
}

.notification-settings-form-labels {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;

	.notification-settings-form-header__title {
		justify-content: flex-start;
	}
}

.notification-settings-form-label-list {
	list-style: none;
	margin: 15px 10px 0 10px;
}

.notification-settings-form-label-list__item {
	height: 40px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.notification-settings-form-header {
	display: none;

	@include breakpoint( ">480px" ) {
		display: flex;
		border-top: solid 1px $gray-light;
		border-bottom: solid 1px $gray-light;
		height: 50px;
	}
}

.notification-settings-form-header__title {
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	text-transform: uppercase;
	justify-content: center;
	color: $gray;
	font-size: 11px;
	padding: 10px;

	.form-select {
		max-width: 125px;
	}

	.noticon {
		margin-right: 5px;
	}
}

.notification-settings-form-stream {
	display: none;

	&.selected-stream {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
	}

	@include breakpoint( ">480px" ) {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;

		&.selected-stream {
			display: none;
		}
	}
}

.notification-settings-form-stream-options {
	color: $gray;
	margin: 20px 0 10px;
	display: block;
}

.notification-settings-form-stream-options__item {
	display: flex;
	height: 40px;
	justify-content: center;

	.form-toggle__switch {
		width: 32px;
		height: 16px;

		&:after {
			width: 12px;
			height: 12px;
		}
	}
}

.notification-settings-form-actions {
	display: block;
	border-top: solid 1px $gray-light;
	padding: 15px 0 15px 0;
	text-align: right;

	.form-fieldset {
		margin-bottom: 10px;

		@include breakpoint( ">480px" ) {
			margin: 10px 0 0 0;
			float: left;
		}
	}

	.form-label {
		text-align: left;
	}

	.form-button {
		float: none;
	}

	@include breakpoint( ">480px" ) {
		height: 55px;
		padding: 15px 0 0 0;
	}
}

.notification-settings-form-actions__save-to-all {
	background: transparent;
	color: darken( $gray, 20% );
}
